<template>
	<div class="mt-2">
		<div class="flex items-center text-t-3">
			<base-icon name="data" size="20"></base-icon>
			<div class="ml-1">{{ $t('betting.stats') }}</div>
		</div>
		<div class="mt-2 grid gap-2 grid-cols-2">
			<up-stats-item
				img="betting-stats/bettingCount"
				title-t="betting.bettingCount"
				:value="bettingCount"></up-stats-item>
			<up-stats-item
				img="betting-stats/stakeTotal"
				title-t="betting.stakeTotal"
				type="amount"
				:value="stakeTotal"></up-stats-item>
			<up-stats-item
				img="betting-stats/winTotal"
				title-t="betting.winTotal"
				:value="winTotal"></up-stats-item>
			<up-stats-item
				img="betting-stats/followedCount"
				title-t="betting.followedCount"
				:value="followedCount"></up-stats-item>
			<up-stats-item
				img="betting-stats/averageOdds"
				title-t="betting.averageOdds"
				type="odds"
				:value="averageOdds"></up-stats-item>
			<up-stats-item
				img="betting-stats/averageAmount"
				title-t="betting.averageAmount"
				type="amount"
				:value="averageAmount"></up-stats-item>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, Ref, inject, watch } from 'vue'
import { BaseIcon } from '@/components/base'
import { UpStatsItem } from '@/components/up'
import { getBetStatistic } from '@/api/betting'
import { useAppStore } from '@/store'

// const isMe = inject<Ref<boolean>>('isMe')

const userId = inject<Ref<string>>('userId')

const appStore = useAppStore()

const bettingCount = ref()
const followedCount = ref()
const averageAmount = ref()
const averageOdds = ref()
const stakeTotal = ref()
const winTotal = ref()

const getStatisticData = async () => {
	try {
		const { data } = await getBetStatistic({
			userId: userId!.value,
			currency: appStore.currency,
			fromStamp: 0
		})
		const { bet, follow, stake, odds, stakes, wins } = data
		bettingCount.value = bet
		followedCount.value = follow
		averageAmount.value = stake
		averageOdds.value = odds
		winTotal.value = wins
		stakeTotal.value = stakes
	} catch (error) {}
}

watch(
	() => userId?.value,
	() => {
		if (userId?.value) {
			getStatisticData()
		}
	},
	{
		immediate: true
	}
)
</script>
